import { CSSProperties } from 'react'
import { useTranslation } from 'react-i18next'
import type { StyleProp, ViewStyle } from 'react-native'
import { Flex } from 'ui/src'
import { NoTransactions } from 'ui/src/components/icons/NoTransactions'
import { BaseCard } from 'uniswap/src/components/BaseCard/BaseCard'
import { isExtensionApp } from 'utilities/src/platform'

interface ActivityListEmptyStateProps {
  containerStyle?: StyleProp<ViewStyle | CSSProperties | (ViewStyle & CSSProperties)>
  title?: string
  description?: string | null
  buttonLabel?: string
  onPress?: () => void
}

export function ActivityListEmptyState({
  containerStyle,
  title,
  description,
  buttonLabel,
  onPress,
}: ActivityListEmptyStateProps): JSX.Element {
  const { t } = useTranslation()

  return (
    <Flex centered pt="$spacing48" px="$spacing36" style={containerStyle}>
      <BaseCard.EmptyState
        buttonLabel={buttonLabel ?? (isExtensionApp ? t('activity.list.none.button') : undefined)}
        description={description === undefined ? t('activity.list.none.description.default') : description}
        icon={<NoTransactions color="$neutral3" size="$icon.100" />}
        title={title ?? t('activity.list.none.title')}
        onPress={onPress}
      />
    </Flex>
  )
}
